<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>展示所有玩家页面</title>
        <script type="text/javascript" src="/asktao-web/js/axios-0.21.0.js"></script>
        <script type="text/javascript" src="/asktao-web/js/vue-2.6.12.js"></script>
        <script type="text/javascript" src="/asktao-web/js/vue-router-3.4.9.js"></script>
        <script type="text/javascript" src="/asktao-web/js/qs-6.9.4.js"></script>
    </head>
    <body>
        <div id="app">
            <table align="center">
                <tr>
                    <td>
                        <router-link to="/celebrity/show"><button>查询</button></router-link>
                        <router-link to="/celebrity/addCelebrity"><button>添加</button></router-link>
                        <hr>
                        <router-view></router-view>
                    </td>
                </tr>
            </table>
        </div>
        <template id="celebrity-table">
            <div>
            <table border="1" align="center">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>玩家</th>
                    <th>门派</th>
                    <th>区组</th>
                    <th>战斗力</th>
                    <th>影响力</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="c in celebrities" :key="c.id">
                    <td>{{c.id}}</td>
                    <td>{{c.name}}</td>
                    <td>{{c.faction}}</td>
                    <td>{{c.groupcome}}</td>
                    <td>{{c.fightNum}}</td>
                    <td>{{c.influence}}</td>
                    <td>
                        <button @click="deleteCelebrity(c.id)">删除</button>
                        <!-- 动态生成地址并拼接上查询参数-->
                        <router-link :to="{path:'/celebrity/updateCelebrity',query:{id:c.id}}"><button>更新</button></router-link>
                    </td>
                </tr>
                </tbody>
            </table>
            <table align="center">
                <tr>
                    <td>
                        <p>
                            <a href="" v-for="page in pages" :key="page" @click.prevent="handleAClick(page)">
                                <button style="margin: 0 0px">
                                    {{page}}
                                </button>
                            </a>
                        </p>
                    </td>
                </tr>
            </table>
            </div>
        </template>
        <!--添加商品界面-->
        <template id="add-form">
            <form action="" @submit.prevent="add">
                玩家: <input type="text" v-model="celebrity.name"> <br>
                门派： <input type="text" v-model="celebrity.faction"> <br>
                区组: <input type="text" v-model="celebrity.groupcome"> <br>
                战斗力: <input type="text" v-model="celebrity.fightNum"> <br>
                影响力: <input type="text" v-model="celebrity.influence"> <br>
                <input type="submit" value="添加">
            </form>
        </template>
        <template id="update-form">
            <form action="" @submit.prevent="update">
                <input type="hidden" v-model="celebrity.id">
                玩家: <input type="text" v-model="celebrity.name"> <br>
                门派： <input type="text" v-model="celebrity.faction"> <br>
                区组: <input type="text" v-model="celebrity.groupcome"> <br>
                战斗力: <input type="text" v-model="celebrity.fightNum"> <br>
                影响力: <input type="text" v-model="celebrity.influence"> <br>
                <input type="submit" value="更新">
            </form>
        </template>
        <script>
            //修改英雄信息
            const updateForm = {
                template:"#update-form",
                data(){
                    return{
                        celebrity:{}
                    }
                },
                created() {
                    axios.get("/asktao-web/celebrity/showOne",{
                        params:{
                            id:this.$route.query.id
                        }
                    }).then(resp=>{
                        console.log(resp);
                        this.celebrity = resp.data.celebrity;
                    }).catch((error)=>{//处理异常
                        console.log(error);
                    })
                },
                methods:{
                    update(){
                        axios.post("/asktao-web/celebrity/updateCelebrity", Qs.stringify({celebrity:this.celebrity},{allowDots:true}))
                        .then(resp=>{
                            console.log(resp);
                            if(resp.data.status == "success"){
                                alert("更新成功");
                                this.$router.push("/celebrity/show");
                            }else{
                                alert("更新失败");
                            }
                        }).catch(error=>{
                            console.log(error);
                        })
                    }
                }
            }
            //添加英雄
            const addForm = {
                template: "#add-form",
                data(){
                    return{
                        celebrity:{}
                    }
                },
                methods: {
                    add(){
                        axios.post("/asktao-web/celebrity/addCelebrity", Qs.stringify({celebrity:this.celebrity},{allowDots:true}))
                        .then(resp=>{
                            console.log(resp);
                            if(resp.data.status == "success"){
                                console.log("进入方法中");
                                alert("添加成功");
                                this.$router.push("/celebrity/show");
                            }else{
                                alert("添加失败");
                            }
                        }).catch((error)=>{//处理异常
                            console.log(error);
                        })
                    }
                }
            }
            const celebrityTable = {
                template:"#celebrity-table",
                data(){
                    return{
                        celebrities:[],
                        pages:[]
                    }
                },
                created() {
                    this.handleAClick(1);
                },
                methods:{
                    //展示所有书籍
                    handleAClick(i){
                        console.log("进入展示方法中");
                        axios.get("/asktao-web/celebrity/show",{
                            params:{
                                pageNum:i,
                                pageSize:3
                            }
                        }).then(resp=>{
                            let data = resp.data;
                            console.log(data);
                            this.celebrities = data.celebrities;
                            this.pages = data.pages;
                        }).catch((error)=>{//处理异常
                            console.log(error);
                        })
                    },
                    //删除玩家信息
                    deleteCelebrity: function (id) {
                        let isDelete = confirm("确定删除吗？");
                        if(!isDelete){
                            return;
                        }
                        axios.get("/asktao-web/celebrity/deleteCelebrity",{
                            params: {
                                id:id
                            }
                        }).then(resp=>{
                            console.log(resp);
                            if (resp.data.status == "success"){
                                alert("删除成功");
                                this.handleAClick(1);
                            }else{
                                alert("删除失败");
                            }
                        }).catch((error)=>{//处理异常
                            console.log(error);
                        })
                    }
                }
            }
            //定义路由规则
            const router = new VueRouter({
                routes:[
                    {path:"/celebrity/show", component:celebrityTable},
                    {path:"/celebrity/addCelebrity", component: addForm},
                    {path:"/celebrity/updateCelebrity", component: updateForm}
                ]
            })
            const vm = new Vue({
                el:"#app",
                router
            })
        </script>
    </body>
</html>